<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>辨析浏览器窗口大小</title>
    <style>
        body{
            padding:150px;
            border:50px solid red;
        }
        .ex{
            border:25px solid yellow;
            padding:50px;
            width:150px;
            height:150px;
            background-color: peachpuff;
        }
    </style>
</head>
<body>
<div class="ex">

</div>
<script>
    //浏览器窗口大小、
    var w1=document.documentElement.clientWidth;
    console.log(w1);
    var w2=document.documentElement.offsetWidth;
    console.log(w2);
    //方块的大小
    var ex=document.querySelector(".ex");
    //offsetWidth包括方块的border+padding，
    //clientWidth包括方块的padding,不包括border
    console.log(ex.offsetWidth);
    console.log(ex.clientWidth)
</script>
</body>
</html>